<template>
  <div class="personnelManagement-container">
    <modules-title title-name="人员管理">
      <template slot="btn">
        <el-button class="main-btn" size="small" @click="createID" type="primary">新建账号</el-button>
      </template>
    </modules-title>
    <div class="table">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{background:'#F5F5F5',color:'#000000',textAlign:'center'}"
      >
<!--        <el-table-column-->
<!--          prop="username"-->
<!--          label="登录账号"-->
<!--          align="center"-->
<!--          min-width="120"-->
<!--        >-->
<!--        </el-table-column>-->
        <el-table-column
          prop="real_name"
          label="姓名"
          align="center"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="gender"
          align="center"
          label="性别"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          align="center"
          label="手机号"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          align="center"
          label="邮箱"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="department"
          align="center"
          label="科室"
          min-width="120"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.department">{{scope.row.department.DepartmentName}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="roles"
          align="center"
          label="角色"
          min-width="200"
        >
          <template slot-scope="scope">
<!--            <div  style="width: 100%;display: flex;flex-wrap: wrap;justify-content:center">-->
<!--              <div v-for="item in scope.row.roles" style="width: 50%">{{item.role_name}}</div>-->
<!--            </div>-->
            <span v-if="scope.row.is_super!=false">超级管理员</span>
            <span v-if="scope.row.is_super==false" v-for="item in scope.row.roles" style="margin-right: 10px;cursor: auto;color:#606266">{{item.role_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="user_status"
          align="center"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.user_status==1"><i class="status"></i>启用</div>
            <div v-if="scope.row.user_status==2"><i class="status-d"></i>禁用</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          align="center"
          label="操作"
          min-width="120">
          <template slot-scope="scope">
            <span @click="editID(scope.row)" v-if="scope.row.is_super==true&&is_super==true" style="color:#3F909E">编辑</span>
            <span @click="editID(scope.row)" v-if="scope.row.is_super==false" style="color:#3F909E">编辑</span>
            <span v-if="scope.row.is_super==false" style="margin-left: 4px;margin-right: 4px">|</span>
            <span class="delete" @click="deleteID(scope.row.id)" v-if="scope.row.is_super==false">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {getPersonnelList,deletePersonnel} from "@/api/clinicManagement";
  import modulesTitle from "@/components/modulesTitle.vue";
  import Templates from "../index";
  export default {
    name: 'personnelManagement',
    components: {Templates, modulesTitle },
    data () {
      return {
        isCreate:true,
        currentPage:1,
        selectData:{
          status:1,
          keyword:'',
          pager:{
            number:1,
            size:10,
            order_by:''
          }
        },
        tableData:[

        ],
        total:0,
        is_super:'',
      }
    },
    created() {
      //获取列表
      this.getList(this.selectData)
      console.log(this.$store.getters.userInfo)
      this.is_super = this.$store.getters.userInfo.is_super
    },
    methods:{
      //获取列表
      getList(data){
        getPersonnelList(data).then(res=>{
          console.log(res)
          if(res.code==200){
            this.tableData = res.data.data
            this.total = res.data.total
          }
        })
      },
      //监听条数变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        Object.assign(this.selectData.pager, {size:val})
        this.getList(this.selectData)
      },
      //监听页码变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        Object.assign(this.selectData.pager, {number:val})
        this.getList(this.selectData)
      },
      //创建账号
      createID(){
        // this.isCreate = false
        this.$router.push({
          name: "createID"
        })
      },
      //编辑账号
      editID(row){
        console.log(row)
        this.$router.push({
          path: '/clinicManagement/personnelManagement/editID',
          query: {
            content:JSON.stringify(row)
          }
        })
        // this.$router.push({
        //   name: "editID",
        //   params:{
        //     content: row,
        //   }
        // })
      },
      //删除账号
      deleteID(id){
        this.$confirm('确认删除此人员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePersonnel(id).then(res=>{
            if(res.code==200){
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });
              this.getList(this.selectData)
            }else{
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          })
        }).catch(() => {

        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/personnelManagement.scss";
</style>
